<template>
  <div class="teacher flex between">
    <div class="main-left">
      <!-- <div class="left-div1">
        <div class="div1-con flex align between">
          <div class="avatar">
            <img :src="require('@/assets/avatar02.png')" />
          </div>
          <div class="con-left">
            <div>姓名：张三</div>
            <div>累计打卡天数：2天</div>
          </div>
          <div class="con-right">
            <div>状态：授课中</div>
            <div>打卡无异常</div>
          </div>
        </div>
        <div
          class="tabs"
          @click="dialogVisible = true"
        >
          考勤打卡
        </div>
      </div> -->
      <div class="left-div2">
        <div class="title title2">授课信息</div>
        <div class="div2-con">
          <div class="flex head">
            <div
              class="avatar"
              style="flex-shrink: 0"
            >
              <img :src="require('@/assets/avatar02.png')" />
            </div>
            <div class="info">
              <div>老师姓名：{{ courseInfo?.teacher.name }}</div>
              <div>
                职务：{{ detail?.course_info?.teacher?.position || "-" }}
              </div>
              <div>
                联系方式：{{ detail?.course_info?.teacher?.mobile || "-" }}
              </div>
              <div>所授课程：{{ courseInfo?.subject?.current }}</div>
              <!-- <div>课程内容：古诗文</div> -->
              <!-- <div>剩余时间：00:45:00</div> -->
            </div>
          </div>
          <div class="intro">所授班级：{{ courseInfo?.clazz_names }}</div>
          <!-- <div class="intro">
            教师简介：简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
          </div> -->
        </div>
      </div>
    </div>
    <div class="main-right flex between">
      <FaceWrap
        :user-type="2"
        ref="faceWrapRef"
      />
      <!-- <div class="right-div1">
        <div class="avatar">
          <img :src="require('@/assets/avatar02.png')" />
        </div>
        <div>姓名：张三</div>
        <div>职务：班主任</div>
        <div>所授课程：语文</div>
        <div>联系方式：15612616511</div>
      </div>
      <div class="right-div2">
        <table>
          <tr style="background: #56e5c5">
            <td>姓名</td>
            <td>所授课程</td>
            <td>职务</td>
            <td>联系方式</td>
          </tr>
          <tr
            v-for="(item, index) in 3"
            :key="index"
          >
            <td>张三</td>
            <td>语文</td>
            <td>班主任</td>
            <td>12544486512</td>
          </tr>
        </table> 
      </div>-->
    </div>
    <DialogFace
      v-model="dialogVisible"
      :user-type="2"
    />
  </div>
</template>
<script setup>
import { clazz } from "@/api/apiData";
import FaceWrap from "@/components/FaceWrap/index.vue";
import DialogFace from "@/components/DialogFace/index.vue";
import { attendance } from "@/api/apiData";
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
const { deviceDetail } = inject("global-stroe");
const dialogVisible = ref(false);
const faceWrapRef = ref();
const courseInfo = ref();
function getTeachDetial(params) {
  const room_id = deviceDetail.value?.room_id;
  // console.log("room_id", room_id);
  clazz.room
    .getClassRoomInfo({
      room_id,
    })
    .then(({ data }) => {
      courseInfo.value = data.course_info;
    });
}
onMounted(() => {
  getTeachDetial();
  faceWrapRef.value.init();
});
onBeforeUnmount(() => {
  faceWrapRef.value.destroy();
});
</script>
<style
  lang="less"
  scoped
>
.teacher {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffd5d5;
    border-radius: 4px;
    overflow: hidden;
  }
  .main-left {
    width: 660px;
    display: flex;
    flex-direction: column;
    .left-div1 {
      flex-shrink: 0;
      border-radius: 8px;
      overflow: hidden;
      background: white;
      position: relative;

      .title1 {
        background: linear-gradient(to right, #18e1b8, #04be93);
      }
      .div1-con {
        padding: 31px;
        .avatar {
          width: 118px;
          height: 140px;
        }

        .con-left {
          font-size: 24px;
          width: 35%;
          div {
            margin-bottom: 27px;
          }
        }
        .con-right {
          font-size: 24px;
          width: 35%;
          border-radius: 8px;
          div {
            margin-bottom: 27px;
          }
        }
      }
      .tabs {
        position: absolute;
        top: 0px;
        right: 0px;
        background: linear-gradient(to right, #9e4bfd, #7747ff);
        color: white;
        font-size: 20px;
        padding: 2px 16px;
      }
    }
    .left-div2 {
      /* margin-top: 20px; */
      flex: 1;
      font-size: 38px;
      background: white;
      border-radius: 8px;
      .title2 {
        background: linear-gradient(to right, #fe9a14, #fe774a);
      }
      .div2-con {
        padding: 41px;
        .head {
          font-size: 24px;

          .avatar {
            width: 190px;
            height: 225px;
            object-fit: cover;
            margin-right: 24px;
          }
          .info {
            div {
              margin-bottom: 16px;
            }
          }
        }
        .intro {
          font-size: 24px;
          margin-top: 24px;
        }
      }
    }
  }
  .main-right {
    width: 1152px;
    padding: 24px;
    border-radius: 8px;
    background: white;
    .title {
      background: linear-gradient(to right, #9e4bfd, #7747ff);
    }
    .right-div1 {
      font-size: 24px;
      .avatar {
        width: 372px;
        height: 441px;
        object-fit: cover;
      }
      div {
        margin-top: 16px;
      }
    }
    .right-div2 {
      width: 740px;
      table {
        width: 100%;
        text-align: center;
        font-size: 20px;
        border-collapse: collapse;
        td {
          padding: 11px 0;
        }
        tr {
          background: #f6f6f6;
        }
        tr:nth-child(odd) {
          background: #b3f2e4;
        }
      }
    }
  }
}
</style>
